@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(./fonts/S6u9w4BMUTPHh7USSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(./fonts/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;

  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
}

body {
  overflow: hidden;
}

canvas {
  z-index: -4;
}

.subtitle {
  position: absolute;
  width: 100%;
  bottom: 13%;
  padding-bottom: 4px;
  color: #fff;
  text-align: center;
  font-family: 'Lato';
  font-size: 20px;
  text-shadow: 0px 0px 3px #fff;
}

.subtitle-content {
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  transition: opacity 0.5s;
}

.letter-wrapper {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 80%;
  height: 70%;
  z-index: 2;
}

.letter {
  padding: 16px;
  font-size: 15px;
  color: rgb(100, 100, 100);
  line-height: 24px;

  overflow-y: auto;
}

p {
  margin-bottom: 8px;
}

.letter-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fafafa;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);

  transform: translate3d(-200%, -200%, 0) rotate(-30deg);

  animation: letter-1-in 3s;
  animation-delay: 5s;
  animation-fill-mode: forwards;

  transition: all 3s;
}

@keyframes letter-1-in
{
  from {transform: translate3d(-200%, -200%, 0) rotate(-30deg);}
  to {transform: translate3d(0, -0, 0) rotate(0deg);}
}

.letter-2 {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  left: 1px;
  top: 0px; /* 0? */
  /* transform: rotate(-2.5deg); */
  /* left: -200%;
  top: -200%; */
  transform: translate3d(-200%, -200%, 0) rotate(-45deg);

  animation: letter-2-in 3s;
  animation-delay: 4.5s;
  animation-fill-mode: forwards;

  transition: all 3s;
}

@keyframes letter-2-in
{
  from {transform: translate3d(-200%, -200%, 0) rotate(-45deg);}
  to {transform: translate3d(0, 0, 0) rotate(-2.5deg);}
}

.letter-3 {
  height: 101%;
  position: absolute;
  width: 100%;
  z-index: -2;
  background: #f6f6f6;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  right: 0px;
  top: 0px;
  /* transform: rotate(2.4deg); */
  /* top: -200%; */
  transform: translate3d(-200%, -200%, 0) rotate(-60deg);

  animation: letter-3-in 3s;
  animation-delay: 4s;
  animation-fill-mode: forwards;

  transition: all 3s;
}

@keyframes letter-3-in {
  from {transform: translate3d(-200%, -200%, 0) rotate(-60deg);}
  to {transform: translate3d(0, 0, 0) rotate(2.4deg);}
}

.typed-cursor {
  color: #ee9ca7;
}

b {
  color: #ee9ca7;
}
